<template>
	<view class="mine-receipt">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="'收款设置'"></navBar>
		</view>
		<view class="main-content">
			<view class="button-group">
				<view :class="`button ${select_status == 0 ? 'active' : ''}`" @click="select(0)">
					<image class="button-img" src="/static/images/common/alipay.png"></image>
					<view class="button-text">支付宝</view>
				</view>
				<!-- <view :class="`button ${select_status == 1 ? 'active' : ''}`" @click="select(1)">
					<image class="button-img" src="/static/images/common/wechat.png"></image>
					<view class="button-text">微信</view>
				</view> -->
				<view :class="`button ${select_status == 2 ? 'active' : ''}`" @click="select(2)">
					<image class="button-img" src="/static/images/common/creditCard.png"></image>
					<view class="button-text">银行卡</view>
				</view>
			</view>
			<!-- <view class="button-group">
				<view :class="`button ${select_status == 2 ? 'active' : ''}`" @click="select(2)">
					<image class="button-img" src="/static/images/common/creditCard.png"></image>
					<view class="button-text">银行卡</view>
				</view>
				<view class="button-one">
				</view>
			</view> -->
			<view class="input-content-style" v-show="select_status === 0">
				<!-- || select_status === 1 -->
				<view class="edit-content-input">
					<view class="input-title">姓名</view>
					<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="请输入姓名"
						v-model="name" :focus="numberFocusTwo" @blur="lostFocusTwo"></input>
				</view>
				<view class="edit-content-input">
					<view class="input-title">{{ title_one }}</view>
					<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="请输入手机号"
						maxlength="11" v-model="mobile" :focus="numberFocus" @blur="lostFocus"></input>
				</view>
				<view class="edit-content-input">
					<view class="input-title">{{ title_two }}</view>
					<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="请输入支付宝账号"
						v-model="account" :focus="numberFocusThree" @blur="lostFocusThree"></input>
				</view>
			</view>
			<view class="input-content-style" v-show="select_status === 2">
				<view class="edit-content-input">
					<view class="input-title">姓名</view>
					<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="请输入姓名"
						v-model="name" :focus="numberFocusTwo" @blur="lostFocusTwo"></input>
				</view>
				<view class="edit-content-input">
					<view class="input-title">手机号</view>
					<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="请输入手机号"
						maxlength="11" v-model="mobile" :focus="numberFocus" @blur="lostFocus"></input>
				</view>
				<view class="edit-content-input">
					<view class="input-title">开户银行</view>
					<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="请输入开户银行"
						v-model="bankName" :focus="numberFocusThree" @blur="lostFocusThree"></input>
				</view>
				<view class="edit-content-input">
					<view class="input-title">支行</view>
					<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="请输入支行名"
						v-model="bankOtherName" :focus="numberFocusFour" @blur="lostFocusFour"></input>
				</view>
				<view class="edit-content-input">
					<view class="input-title">银行卡号</view>
					<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="请输入银行卡号"
						maxlength="19" v-model="cardNumber" :focus="numberFocusFive" @blur="lostFocusFive"></input>
				</view>
			</view>
			<!-- <view class="upload-style" v-if="select_status === 0 || select_status === 1">
				<view :class="`${isUploadURL ? 'upload-two' : 'upload'} `" @click="uploadImg()">
					<image :class="`img ${isUploadURL? ' success' : ''}`" src="/static/images/common/plus.png">
					</image>
					<view :class="`text ${isUploadURL? ' success' : ''}`">{{ tips }}</view>
					<image class="show-img" :src="isUploadURL" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="tips" v-show="select_status == 2">温馨提示: <br>收款信息上传后无法修改，请确保无误后上传。</view>
			<view class="save-button" @tap="saveCode">确定保存</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">{{ maskTips }}</text>
						<view class="button-box">
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import Fn from '@/common/public.js';
	import {
		getpay,
		setPay,
		uploadPic
	} from '@/common/api.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				/* 用户数据 */
				token: '', // 用户token
				imgUrl: store.state.baseUrl + '/api/common/uploadPic', // 上传图片接口

				/* 选择按钮 */
				select_status: 0, // 选择收款码设置
				tips: '支付宝收款码', // 收款码提示
				numberFocus: false, // 手机号聚焦状态
				numberFocusTwo: false, // 账号 - 银行卡号 聚焦状态
				numberFocusThree: false, // 姓名聚焦状态
				numberFocusFour: false, // 开户银行聚焦状态
				numberFocusFive: false, // 银行卡号聚焦状态

				/* 用户上传信息 */
				isUploadURL: '', // 已上传收款码图片
				alipay: {}, // 支付宝收款码
				wechat: {}, // 微信收款码
				creditCard: {}, // 银行卡设置
				title_one: '手机号', // 标题
				title_two: '支付宝账号',
				mobile: '', // 手机号
				account: '', // 账号
				name: '', // 姓名
				bankName: '', // 开户银行
				bankOtherName: '', // 开户支行
				cardNumber: '', // 银行卡号

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
			};
		},
		onLoad() {
			/* 获取用户token */
			this.getToken();

			/* 获取用户收款码数据 */
			this.getUserPay();
		},
		onShow() {
			
		},
		methods: {

			/* 获取token */
			getToken() {
				this.token = uni.getStorageSync('token');
			},
			
			/* 选择收款设置 */
			select(id) {
				if (id === 0) {
					this.select_status = 0;
					this.tips = '支付宝收款码';
					this.title_two = '支付宝账号';
					if (JSON.stringify(this.alipay) != "{}") {
						this.isUploadURL = this.alipay.img;
						this.mobile = this.alipay.phone;
						this.account = this.alipay.payAccount;
					} else {
						this.isUploadURL = '';
						this.name = "";
						this.mobile = '';
						this.account = '';
					};
				} else if (id === 1) {
					this.select_status = 1;
					this.tips = '微信收款码';
					this.title_two = '微信账号';
					if (JSON.stringify(this.wechat) != "{}") {
						this.isUploadURL = this.wechat.img;
						this.mobile = this.wechat.phone;
						this.account = this.wechat.payAccount;
					} else {
						this.isUploadURL = '';
						this.name = "";
						this.mobile = '';
						this.account = '';
					};
				} else if (id === 2) {
					this.select_status = 2;
					if (JSON.stringify(this.creditCard) != "{}") {
						this.mobile = this.creditCard.phone;
						this.name = this.creditCard.name;
						this.bankName = this.creditCard.bankName;
						this.bankOtherName = this.creditCard.bankOtherName;
						this.cardNumber = this.creditCard.cardNum;
					} else {
						this.mobile = "";
						this.name = "";
						this.bankName = "";
						this.bankOtherName = "";
						this.cardNumber = "";
					};
				};
			},

			/* 获取收款码信息 */
			getUserPay() {
				const that = this;
				getpay().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						if ('alipay' in result) {
							that.alipay = result.alipay;
						};
						if ('weixin' in result) {
							that.wechat = result.weixin;
						};
						if ('unionpay' in result) {
							that.creditCard = result.unionpay;
						};
						if (that.select_status === 0) {
							that.isUploadURL = that.alipay.img;
							that.mobile = that.alipay.phone;
							that.account = that.alipay.payAccount;
						} else if (that.select_status === 1) {
							that.isUploadURL = that.wechat.img;
							that.mobile = that.wechat.phone;
							that.account = that.wechat.payAccount;
						} else {
							that.mobile = that.creditCard.phone;
							that.name = that.creditCard.name;
							that.bankName = that.creditCard.bankName;
							that.bankOtherName = that.creditCard.bankOtherName;
							that.cardNumber = that.creditCard.cardNum;
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 保存收款码 */
			saveCode() {
				const that = this;
				if (that.select_status === 0 || that.select_status === 1) {
					if (that.mobile === '') {
						Fn.Toast('手机号不能为空', 3, 1500);
						this.numberFocus = true;
						return;
					};
					if (that.account === '') {
						Fn.Toast(that.tips + '不能为空', 3, 1500);
						this.numberFocusTwo = true;
						return;
					};
					if (that.isUploadURL === '') {
						Fn.Toast('收款码不能为空', 3, 1500);
						return;
					};
					const params = {
						phone: that.mobile,
						payAccount: that.account,
						img: that.isUploadURL,
						type: that.select_status + 2
					};
					uni.$u.throttle(() => {
						setPay(params).then((res) => {
							const result = res;
							if (result.status === 1) {
								this.getUserPay();
								Fn.Toast(res.msg, 3, 1500);
							} else {
								Fn.Toast(res.msg, 3, 1500);
							};
						});
					}, 1500);
				} else {
					if (that.mobile === '') {
						Fn.Toast('手机号不能为空', 3, 1500);
						this.numberFocus = true;
						return;
					};
					if (that.name === '') {
						Fn.Toast('姓名不能为空', 3, 1500);
						this.numberFocusTwo = true;
						return;
					};
					if (that.bankName === '') {
						Fn.Toast('开户银行不能为空', 3, 1500);
						this.numberFocusThree = true;
						return;
					};
					if (that.bankOtherName === '') {
						Fn.Toast('开户支行不能为空', 3, 1500);
						this.numberFocusFour = true;
						return;
					};
					if (that.cardNumber === '') {
						Fn.Toast('银行卡号不能为空', 3, 1500);
						this.numberFocusFive = true;
						return;
					};
					const params = {
						phone: that.mobile,
						type: 1,
						name: that.name,
						bankName: that.bankName,
						bankOtherName: that.bankOtherName,
						cardNum: that.cardNumber
					};
					uni.$u.throttle(() => {
						setPay(params).then((res) => {
							const result = res;
							if (result.status === 1) {
								this.getUserPay();
								Fn.Toast(res.msg, 3, 1500);
							} else {
								Fn.Toast(res.msg, 3, 1500);
							};
						});
					}, 1500);
				};
			},

			/* 上传图片 */
			uploadImg() {
				const that = this;
				if (!that.isUploadURL) {
					uni.chooseImage({
						count: 1, //上传图片的数量，默认是9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						// sourceType: ['album'], //从相册选择
						success: function(res) {
							const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
							uni.uploadFile({
								url: that.imgUrl, //post请求的地址
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									'Token': that.token // 设置Token头部
								},
								formData: {
									'upload_type': 'idCard' //formData是指除了图片以外，额外加的字段
								},
								success: (uploadFileRes) => {
									//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
									var result = JSON.parse(uploadFileRes.data);
									if (result.status === 1) {
										Fn.Toast(result.msg, 3, 1500);
										that.isUploadURL = result.data.src;
									} else {
										that.maskTips = result.msg;
										that.showTips = true;
										that.isUploadURL = '';
									};
								},
							});
						},
					});
				}
			},

			/* 确认 */
			confirm() {
				this.showTips = false;
			},

			/* 失去焦点时 */
			lostFocus(event) {
				this.numberFocus = false;
			},

			/* 失去焦点时 */
			lostFocusTwo(event) {
				this.numberFocusTwo = false;
			},

			/* 失去焦点时 */
			lostFocusThree(event) {
				this.numberFocusThree = false;
			},

			/* 失去焦点时 */
			lostFocusFour(event) {
				this.numberFocusFour = false;
			},

			/* 失去焦点时 */
			lostFocusFive(event) {
				this.numberFocusFive = false;
			},
		}
	}
</script>

<style lang="scss">
	.mine-receipt {


		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 20rpx 40rpx 20rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: bold;
						color: #89898C;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							// cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							// cursor: pointer;
						}
					}
				}
			}
		}

		.main-content {
			padding: 30rpx 36rpx;
			// box-shadow: 0px 2px 5px #dedede;

			.button-group {
				display: flex;
				align-items: center;
				justify-content: center;

				.button {
					width: 150rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 16rpx 32rpx;

					.button-img {
						width: 40rpx;
						height: 40rpx;
					}

					.button-text {
						margin-left: 16rpx;
						font-size: 28rpx;
						font-family: AlibabaPuHuiTi_2_85_Bold;
					}

					&:nth-of-type(n+1) {
						margin-right: 10px;
					}

					&:nth-of-type(2) {
						margin-right: 0;
						margin-left: 10px;
					}
				}

				// .button-one {
				// 	width: 20vw;
				// 	padding: 8px 16px;
				// 	margin-left: 10px;
				// }

				.active {
					background-color: #F5F5F5;
				}

				&:nth-of-type(n+2) {
					margin-top: 20rpx;
				}
			}

			.input-content-style {
				margin-top: 40rpx;

				.edit-content-input {
					padding: 24rpx 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border: 1px solid #E1E1E1;
					border-radius: 10rpx;

					.input-style {
						width: 45vw;
						color: #58585a;
						font-size: 28rpx;
						text-align: right;
					}

					.input-placeholder {
						color: #a5a5a8;
						font-size: 28rpx;
						font-family: AlibabaPuHuiTi_2_55_Regular;
					}

					.input-title {
						font-size: 30rpx;
					}

					&:nth-of-type(n+2) {
						margin-top: 30rpx;
					}
				}
			}

			.upload-style {
				margin-top: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.upload {
					position: relative;
					width: 30vw;
					height: 30vw;
					padding: 50rpx;
					text-align: center;
					border: 2px solid #E1E1E1;

					.img {
						position: relative;
						z-index: 1;
						width: 60rpx;
						height: 60rpx;
						top: 40%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.text {
						position: relative;
						z-index: 1;
						color: #b5b5b5;
						font-size: 26rpx;
						top: 50%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.show-img {
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
						width: 200rpx;
						height: 200rpx;
					}
				}

				.upload-two {
					position: relative;
					width: 30vw;
					height: 54vw;
					text-align: center;

					.img {
						position: relative;
						z-index: 1;
						width: 60rpx;
						height: 60rpx;
						top: 40%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.text {
						position: relative;
						z-index: 1;
						color: #b5b5b5;
						font-size: 26rpx;
						top: 50%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.show-img {
						width: 30vw;
						margin: auto;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
					}
				}
			}

			.tips {
				margin-top: 30rpx;
				color: #F71D1F;
				font-size: 26rpx;
				font-family: AlibabaPuHuiTi_2_85_Bold;
			}

			.save-button {
				height: 94rpx;
				background-color: #F71D1F;
				margin: 60rpx auto 0 auto;
				color: #FFFFFF;
				font-size: 32rpx;
				font-family: AlibabaPuHuiTi_2_85_Bold;
				line-height: 94rpx;
				text-align: center;
				border-radius: 10rpx;
			}
		}
	}
</style>
